<template>
	<view class="body">
		<view class="top">
			<view class="center">
				<view class="box">
					<view class="title">
						<view class="icon"></view>
						<text class="title_type">选择意见类型</text>
					</view>
					<view class="yj_type">
						<view :class="item.classname" v-for="(item,index) in list" :key='index'
							@tap="btn(item.title,index)"
							:style="{background: item.bgColor,border:item.isClicked == true ?  '1px solid ' + item.boderColor : '0px solid' + item.boderColor}">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="content">
					<view class="title">
						<view class="icon"></view>
						<text class="title_type">具体意见内容</text>
					</view>
					<view class="cont">
						<textarea v-model="txt" maxlength="140" cols="20" rows="10" class="text"
							placeholder="补充说点别的补充说点别的" @input="descInput"></textarea>
						<view class="nums">
							{{num}}/140
						</view>
					</view>
				</view>
				<view class="content_img">
					<view class="title1">
						<view class="icon"></view>
						<text class="title_type">图片({{imageValue.length}}/3)</text>
					</view>
					<uni-section>
						<view class="example-body">
							<uni-file-picker limit="3" @select="select" @delete='deleteimg'></uni-file-picker>
						</view>
					</uni-section>
				</view>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view class="footer">
			<view class="f1">
				<view class="f2">
					<view class="bt1" @tap='facerecod'>
						反馈记录
					</view>
					<view class="bt2" @tap='sub'>
						提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		busOpinionadd,
		busOpinionup
	} from '../../../utils/myapi.js'
	import {
		baseURL
	} from '../../../utils/baseUrl.js'
	export default {
		data() {
			return {
				list: [{
					id: '0',
					title: '意见反馈',
					bgColor: '',
					boderColor: '',
					isClicked: false,
					boderColor: '',
					classname: 'typechildern'
				}, {
					id: '1',
					title: '举报投诉',
					bgColor: '',
					boderColor: '',
					isClicked: false,
					classname: 'typechildern'
				}, {
					id: '2',
					title: '软件BUG',
					bgColor: '',
					boderColor: '',
					isClicked: false,
					classname: 'typechildern'
				}, {
					id: '3',
					title: '资金问题',
					bgColor: '',
					boderColor: '',
					isClicked: false,
					classname: 'typechildern'
				}, {
					id: '4',
					title: '其他',
					bgColor: '',
					boderColor: '',
					isClicked: false,
					classname: 'typechildern'
				}, {
					id: '5',
					classname: 'types'
				}],
				txt: '', //文本域
				num: 0,
				name: '',
				imageValue: [],
				msgType: '',
				messageText: '',
				isucess: true
			}
		},
		mounted() {},
		methods: {
			facerecod() {
				uni.navigateTo({
					url: "../../../subPackagesA/pages/ferecod/ferecod"
				})
			},
			//选择意见类型触发事件
			btn(title, index) {
				console.log(title, index, 'index')
				this.name = title

				for (let i = 0; i < this.list.length; i++) {
					if (index != 5) {
						if (i == index) {
							this.list[i].isClicked = true
							this.list[i].bgColor = '#FFF5ED'
							this.list[i].boderColor = '#FF7F22'
						} else {
							this.list[i].isClicked = false
							this.list[i].bgColor = '#F8F8F8'
							this.list[i].boderColor = '#F8F8F8'
						}
					}
				}
			},
			//监听文本域得字数
			descInput(e) {
				//  e.target.value = e.target.value.replace(/\s+/g, ' ');

				this.num = e.target.value.length
				if (e.target.value.length > 140) {
					uni.showToast({
						title: '超过了最大字数',
						icon: 'none'
					});
					  this.num = this.num.slice(0, 140);
				}
			},
			//获取上传状态
			async select(e) {
				console.log(e, 'eeee');
				const tempFilePaths = e.tempFilePaths;
				uni.showLoading({
					title: '上传中...',
					success: (success) => {
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: `${baseURL}/sys/common/upload`, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'biz': 'postPicture'
								},
								header: {
									"X-Access-Token": uni.getStorageSync("token")
								},
								success: (uploadFileRes) => {

									const imgInfo = JSON.parse(uploadFileRes.data);
									console.log(imgInfo.message, 'uploadFileRes');
									this.imageValue.push(imgInfo.message)
									uni.hideLoading();
								}
							});
						}
					},
				});

			},
			//图片移除事件
			deleteimg(e) {
				const font = e.tempFilePath.lastIndexOf('/') + 1
				const second = e.tempFilePath.lastIndexOf('.')
				const path = e.tempFilePath.slice(font, second)
				let arr = []
				this.imageValue.map((item) => {
					const leftindex = item.lastIndexOf('/') + 1
					const rightindex = item.lastIndexOf('_')
					const result = item.slice(leftindex, rightindex)
					arr.push(result)
				})
				const index = arr.findIndex(v => v === path);
				this.imageValue.splice(index, 1)
			},
			//提交
			async sub() {
				const pathimg = this.imageValue.toString()
				const params = {
					opinionType: this.name,
					opinion: this.txt,
					opinionPath: pathimg
				}
				console.log(params, 'params');
				if (params.opinion == "" || params.opinionType == "") {
					this.msgType = 'error'
					this.messageText = "请将数据添写完整"
					this.$refs.message.open()
				} else {
					if (this.isucess) {
						this.isucess = false
						let _this = this
						setTimeout(() => {
							_this.isucess = true
						}, 1000)
						try{
							const result = await busOpinionadd(params)
							if (result.code == 200) {
								this.msgType = 'sucess'
								this.messageText = result.message
								this.$refs.message.open()
								this.imageValue = []
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									})
								}, 500);
							} else {
								// this.msgType = 'error'
								// this.messageText = result.message
								// this.$refs.message.open()
							}
						}catch(e){
							//TODO handle the exception
						}
						}
						
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.body {
		.top {
			width: 100%;
			height: 80vh;
			background: #F5F5F5;

			.center {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				.box {
					width: 686rpx;
					height: 304rpx;
					background: #FFFFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-top: 23rpx;
				}

				.content {
					width: 686rpx;
					height: 328rpx;
					background: #FFFFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-top: 23rpx;

					.cont {
						position: relative;

						.text {
							width: 641rpx;
							height: 180rpx;
							background-color: #F8F8F8;
							margin-left: 23rpx;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							opacity: 1;
						}

						.text::placeholder {
							font-size: 28rpx;
							/* 设置字体大小 */
							// margin-top: 50rpx; /* 调整位置 */
						}

						.nums {
							position: absolute;
							bottom: 0;
							right: 100rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
				}

				.content_img {
					width: 686rpx;
					// height: 304rpx;
					background: #FFFFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-top: 23rpx;

					/deep/ .uni-section {
						margin-left: 36rpx;
						margin-top: 17rpx;
					}

					/deep/ .file-picker__box-content {
						height: 170rpx;
						width: 170rpx;
					}

					/deep/ .uni-section-header {
						padding: 6px 10px !important;
					}
				}

				.title {
					width: 233rpx;
					height: 80rpx;
					display: flex;
					justify-content: space-around;
					margin-left: 23rpx;
					margin-top: 32rpx;

					.icon {
						width: 10rpx;
						height: 41rpx;
						background: #FF7F22;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						opacity: 1;
					}

					.title_type {
						font-size: 34rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}

				.yj_type {
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					height: 194rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 16px;

					.typechildern {
						width: 186rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						background: #F8F8F8;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						opacity: 1;
					}

					.types {
						width: 186rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						background: #F8F8F8;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						opacity: 0;
					}
				}

				.title1 {
					width: 184rpx;
					// height: 100rpx;
					display: flex;
					justify-content: space-around;
					margin-left: 23rpx;
					margin-top: 32rpx;

					.icon {
						width: 10rpx;
						height: 41rpx;
						background: #FF7F22;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						opacity: 1;
					}

					.title_type {
						font-size: 34rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 20vh;
			background: #F5F5F5;
			position: relative;

			.f1 {
				width: 100%;
				position: absolute;
				bottom: 40rpx;

				.f2 {
					display: flex;
					justify-content: space-around;

					.bt1 {
						width: 224rpx;
						height: 88rpx;
						line-height: 88rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						opacity: 1;
						border: 1px solid #FF7F22;
						text-align: center;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FF7F22;
					}

					.bt2 {
						width: 446rpx;
						height: 88rpx;
						text-align: center;
						line-height: 88rpx;
						background: #FF7F22;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						opacity: 1;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>